.YutianBox{
	width: 100%;
	height: 100%;
	background: #002F5E;
	.content{
		display: flex;
		.line{
			margin: 0 20px;
			width: 2px;
			height: 384px;
			background: linear-gradient(to bottom, rgba(51,153,1255, 0) 0%, #3C96FF 50%, rgba(51,153,1255, 0) 100%);
		}
	}

	// 灾害防范Disaster prevention
	.disasterPreventionBox{
		width: 811px;
		height: 355px;
		margin-left: 24px;
		margin-right: 24px;
		position: relative;
		margin-top: -30px;

		.content{
			width: 100%;
			.centerBg{
				width: 730px;
				height: 287px;
				background: url("./img/灾害防范.png") no-repeat;
				background-size: contain;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top:-118px;
				margin-left: -(730px / 2);

				>div{
					position: absolute;
					top: -146px;
					left: 50%;
					width: 730px;
					height: 370px;
					margin-left: -365px;
					font-size: 30px;
					text-align: center;
					color: #B40016;
					letter-spacing: 0.36px;
					line-height: 370px;
					background: url("./img/sun.png") no-repeat center top;
					background-size: contain;
					z-index: 999;
				}
			}
			.round3dBox{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				:global{
					.u_p3d{
						-webkit-transform-style: preserve-3d !important;
						transform-style: preserve-3d !important;
					}

					.ui_base {
						position: relative;
						width: 478px;
						height: 0;
						margin: 0 auto;
						-webkit-perspective: 1000px;
						-webkit-perspective-origin: 50% 0%;
						perspective: 1000px;
						perspective-origin: 50% 0%;
						.base{
							transform: rotateX(85deg);
							position: absolute;
							top: 0;
							width: 478px;
							height: 478px;
							margin-top: -100px;
							-webkit-backface-visibility: hidden;
							backface-visibility: hidden;
							animation: cir 10s linear 0s infinite;
							.pan {
								position: absolute;
								width: 100%;
								height: 100%;
								background-image: url("./img/c.png");
								background-size: 100% 100%;
								animation: cir_p 10s linear 0s infinite;
							}
							.ball_base {
								transform-origin: 256px -40px;
								position: absolute;
								top: 256px;
								left: 0;
								width: 256px;
								height: 127px;
								.ball{
									-webkit-transition:all 2s ease-out 0ms;
									transition:all 2s ease-out 0ms;
									-webkit-transform-origin: 50% 50%;
									transform-origin: 50% 50%;
									position: absolute;
									width: 80px;
									height: 80px;
									line-height: 80px;
									text-align: center;
									background-image: url('./img/ballBgActive.png');
									background-size: 100% 100%;
									left: 0;
									top: 0;
									color: rgba(255, 255, 255, 0);
									font-size: 12px;
									opacity: 1;
									border-radius: 40px;
									strong{
										font-size: 30px;
										background: transparent;
										border:none;
										color: #FFFFFF;
										letter-spacing: 0.36px;
										line-height: 80px;
										text-align: center;
										font-weight: 400;
										display: inline-block;
										width: 80px;
										height: 80px;
									}
									span{
										position: absolute;
										width: 150px;
										text-align: center;
										padding-top: 15px;
										top: 80px;
										left: 50%;
										margin-left: -75px;
										font-size: 20px;
										color: #FFFFFF;
										letter-spacing: 0.24px;
										line-height: 20px;
									}
								}
								&.ball_top1 {
									transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
									.ball {
										animation: cirTop1 10s linear 0s infinite;
										transition-delay: 1100ms !important;
									}
								}
								&.ball_top2 {
									transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
									.ball {
										animation: cirTop2 10s linear 0s infinite;
										transition-delay: 500ms !important;
									}
								}
							}

							&.bottomRound{
								top: -104px;
								width: 730px;
								height: 730px;
								left: -125px;
								transform: rotateX(80deg);
								animation: cirBottom 10s linear 0s infinite;
								.ball_base {
									transform-origin: 365px -20px;
									position: absolute;
									top: 406px;
									left: 0;
									width: 365px;
									height: 127px;
									//border: 1px solid red;
									.ball{
										background-image: url('./img/ballBg.png');
									}
									&.ball_bottom1 {
										transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
										.ball {
											animation: cirBottom1 10s linear 0s infinite;
											transition-delay: 900ms !important;
										}
									}
									&.ball_bottom2 {
										transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
										.ball {
											animation: cirBottom2 10s linear 0s infinite;
											transition-delay: 700ms !important;
										}
									}
									&.ball_bottom3 {
										transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
										.ball {
											animation: cirBottom3 10s linear 0s infinite;
											transition-delay: 300ms !important;
										}
									}
									&.ball_bottom4 {
										transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
										.ball {
											animation: cirBottom4 10s linear 0s infinite;
											transition-delay: 100ms !important;
										}
									}
								}
							}
						}
					}



				}

			}


		}
	}
}


@keyframes :global(cir) {
	0% {
		transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(80deg) rotateY(0deg) rotateZ(-360deg);
	}
}
@keyframes :global(cirBottom) {
	0% {
		transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(80deg) rotateY(0deg) rotateZ(-360deg);
	}
}
@keyframes :global(cir_p) {
	0% {
		transform: rotateZ(0deg) ;
	}
	100% {
		transform: rotateZ(-360deg);
	}
}
@keyframes :global(cirTop1) {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(-360deg);
	}
}
@keyframes :global(cirTop2) {
	0% {
		transform: rotateY(-180deg);
	}
	100% {
		transform: rotateY(-540deg);
	}
}


@keyframes :global(cirBottom1) {
	0% {
		transform: rotateY(-60deg);
	}
	100% {
		transform: rotateY(-420deg);
	}
}
@keyframes :global(cirBottom2) {
	0% {
		transform: rotateY(-120deg);
	}
	100% {
		transform: rotateY(-480deg);
	}
}
@keyframes :global(cirBottom3) {
	0% {
		transform: rotateY(-240deg);
	}
	100% {
		transform: rotateY(-600deg);
	}
}
@keyframes :global(cirBottom4) {
	0% {
		transform: rotateY(-300deg);
	}
	100% {
		transform: rotateY(-660deg);
	}
}
